<template>
  <inline-Modal
    :visible="visible"
    title="配置"
    :showOk="false"
    @cancel="handelCancel()"
  >
    <div class="configDetailPage-container">
      <!-- 左侧布局 -->
      <div class="tree-baseinfo-container">
        <div class="header-container">
          <div class="name">竣工资料</div>
          <div class="import-btns">
            <a-button
              class="cu-btn-filter"
              v-if="btn.import"
              @click="handelImportModal()"
              v-action:gcdapz_import
            >
              导入
            </a-button>
            <a-button
              class="cu-btn-filter"
              v-if="btn.export"
              @click="exportExcel()"
            >
              导出
            </a-button>
          </div>
        </div>
        <div class="tree-body-container">
          <div class="tree-search">
            <a-input-search
              style="width: 100%"
              placeholder="请输入关键字"
              @search="onSearch"
              v-model="keyWord"
            />
          </div>
          <div class="tree-tip">
            <div>编号/类目</div>
            <div>卷数/页次</div>
          </div>
          <div class="tree-main">
            <a-spin :spinning="spinning">
              <a-empty v-if="treeData.length == 0" :description="false" />
              <a-tree
                v-else
                show-icon
                :expanded-keys="expandedKeys"
                :auto-expand-parent="autoExpandParent"
                :selected-keys="selectedKeys"
                :tree-data="treeData"
                @expand="onExpand"
                @select="onSelect"
                :replaceFields="{
                  children: 'children',
                  title: 'nodeName',
                  key: 'uuid',
                }"
              >
                <!-- 自定义图标 -->
                <template slot="custom" slot-scope="{ children, selected }">
                  <icon-font
                    :class="[selected && 'checked']"
                    :type="
                      children && children.length
                        ? 'icon-wenjianjia-'
                        : 'icon-jidiantuzhi'
                    "
                  />
                </template>
                <template
                  slot="title"
                  slot-scope="{
                    nodeName,
                    selected,
                    volumesNumbers,
                    pageNumbers,
                    id,
                    uuid,
                    add,
                    edit,
                    del,
                  }"
                >
                  <span
                    :title="
                      nodeName + '(' + volumesNumbers + '/' + pageNumbers + ')'
                    "
                    :class="[selected && 'checked']"
                  >
                    {{ nodeName }}
                  </span>
                  <div class="operate-icon">
                    <!-- 操作 -->
                    <div class="btn-groups" v-if="selected">
                      <a-tooltip placement="top" v-if="add">
                        <template slot="title">
                          <span>新增</span>
                        </template>
                        <a-icon
                          type="plus-circle"
                          @click.stop="handelAddFinal(id)"
                        />
                      </a-tooltip>
                      <a-tooltip placement="top" v-if="edit">
                        <template slot="title">
                          <span>编辑</span>
                        </template>
                        <a-icon
                          type="edit"
                          @click.stop="handelEditFinal(uuid)"
                        />
                      </a-tooltip>
                      <a-tooltip placement="top" v-if="del">
                        <template slot="title">
                          <span>删除</span>
                        </template>
                        <a-icon
                          type="delete"
                          @click.stop="handleDelFinal(uuid)"
                        />
                      </a-tooltip>
                    </div>
                    <!-- 统计 -->
                    <span v-else> {{ volumesNumbers }}/{{ pageNumbers }}</span>
                  </div>
                </template>
              </a-tree>
            </a-spin>
          </div>
        </div>
      </div>
      <!-- 拖拽 -->
      <div class="resizer">
        <div class="drag-container">
          <a-icon type="column-width" />
        </div>
      </div>
      <!-- 右侧布局 -->
      <div class="table-baseinfo-container">
        <div class="files-container">
          <div class="header-container">
            <div class="name">档案目录</div>
            <div class="import-btns">
              <a-button
                class="cu-btn-primary margin-bottom-xs"
                icon="plus"
                @click="handelAddFiles()"
                v-if="!treeItem.children"
              >
                新增
              </a-button>
            </div>
          </div>
          <div class="directory-body-container">
            <vxe-table
              ref="filexTable"
              height="300px"
              align="center"
              show-overflow
              show-header-overflow
              border="inner"
              :data="files.tableData"
              :column-config="{ resizable: true }"
              size="small"
              :loading="files.loading"
              :row-config="{ isCurrent: true, isHover: true }"
              @current-change="currentChangeEvent"
            >
              <vxe-column type="seq" width="80" title="序号">
                <template #default="{ rowIndex }">
                  <span v-if="rowIndex != 0">
                    {{ rowIndex }}
                  </span>
                </template>
              </vxe-column>
              <vxe-column field="caseTitle" title="案卷题名"> </vxe-column>
              <vxe-column field="documentCode" title="档号"> </vxe-column>
              <vxe-column field="volumesNumbers" title="件数"> </vxe-column>
              <vxe-column field="pageNumbers" title="页数"> </vxe-column>
              <vxe-column title="起止时间">
                <template #default="{ row,rowIndex }">
                  <span v-if="rowIndex != 0">
                    {{ row.startDate }}~{{ row.endDate }}
                  </span>
                </template>
              </vxe-column>
              <vxe-column field="retentionPeriodDesc" title="保管期限">
              </vxe-column>
              <vxe-column field="remark" title="备注"> </vxe-column>
              <vxe-column
                field="operate"
                width="80"
                title="操作"
                fixed="right"
                align="left"
              >
                <template #default="{ row,rowIndex }">
                  <div class="text-button-group" v-if="rowIndex != 0">
                    <a-tooltip>
                      <template slot="title">
                        编辑
                      </template>
                      <a-icon
                        type="edit"
                        @click="handelEditFiles(row)"
                        v-if="row.edit"
                      />
                    </a-tooltip>
                    <a-tooltip>
                      <template slot="title">
                        删除
                      </template>
                      <a-icon
                        type="delete"
                        @click="handleDelFiles(row)"
                        v-if="row.del"
                      />
                    </a-tooltip>
                  </div>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </div>
        <div class="volume-container">
          <div class="header-container">
            <div class="name">卷内目录</div>
            <div class="import-btns">
              <!-- <a-button
                class="cu-btn-primary margin-bottom-xs"
                icon="plus"
                @click="handelAddVolume()"
                v-if="rowsItem.uuid"
              >
                新增
              </a-button> -->
            </div>
          </div>
          <div class="directory-body-container">
            <vxe-table
              ref="xTable"
              height="236px"
              align="center"
              show-overflow
              show-header-overflow
              border="inner"
              :data="volume.tableData"
              :column-config="{ resizable: true }"
              size="small"
              :loading="volume.loading"
            >
              <vxe-column type="seq" width="80" title="序号"> </vxe-column>
              <vxe-column field="fileCode" title="文件编号"> </vxe-column>
              <vxe-column field="responsibility" title="责任者"> </vxe-column>
              <vxe-column field="fileTitle" title="文件材料题名"> </vxe-column>
              <vxe-column title="文件查看/下载">
                <template #default="{ row }">
                  <div class="operate-icon" v-if="row.fileInfo">
                    <a-tooltip>
                      <template slot="title">
                        预览
                      </template>
                      <a-icon type="eye" @click="viewFile(row)" />
                    </a-tooltip>
                    <a-tooltip>
                      <template slot="title">
                        下载
                      </template>
                      <a-icon type="download" @click="downloadFile(row)" />
                    </a-tooltip>
                  </div>
                </template>
              </vxe-column>
              <vxe-column field="describeinfo" title="描述"> </vxe-column>
              <vxe-column field="uploadTime" title="时间"> </vxe-column>
              <vxe-column field="pageRange" title="页次"> </vxe-column>
              <vxe-column field="remark" title="备注"> </vxe-column>
              <vxe-column field="pageNumber" title="页数"> </vxe-column>
              <!-- <vxe-column
                field="operate"
                width="80"
                title="操作"
                fixed="right"
                align="left"
              >
                <template #default="{ row }">
                  <div class="text-button-group">
                    <a-tooltip>
                      <template slot="title">
                        编辑
                      </template>
                      <a-icon type="edit" @click="handelEditVolume(row)" />
                    </a-tooltip>
                    <a-tooltip>
                      <template slot="title">
                        删除
                      </template>
                      <a-icon type="delete" @click="handleDelVolume(row)" />
                    </a-tooltip>
                  </div>
                </template>
              </vxe-column> -->
            </vxe-table>
          </div>
          <div class="pager-container">
            <vxe-pager
              size="small"
              background
              :current-page.sync="volume.pager.page"
              :page-size.sync="volume.pager.pageSize"
              :total="volume.pager.total"
              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
              :page-sizes="[20, 50, 100, 500]"
              @page-change="paginationChange"
            >
              <template #left>
                <div class="vxe-pager-left-tip-container">
                  共<span>{{ volume.pager.total }}</span
                  >条
                </div>
              </template>
            </vxe-pager>
          </div>
        </div>
      </div>
    </div>
    <!-- 竣工资料 -->
    <addFinalModal
      :visible.sync="addFinalModal.visible"
      :parameter="addFinalModal.soucre"
      :operateType="addFinalModal.operateType"
      @ok="addFinalModalOk()"
    ></addFinalModal>
    <!-- 档案目录 -->
    <addFilesModal
      :visible.sync="files.visible"
      :parameter="files.soucre"
      :operateType="files.operateType"
      @ok="addFilesModalOk()"
    ></addFilesModal>
    <!-- 卷内目录 -->
    <addVolumeModal
      :visible.sync="volume.visible"
      :parameter="volume.soucre"
      :operateType="volume.operateType"
      @ok="addVolumeModalOk()"
    ></addVolumeModal>
    <!-- 导入 -->
    <importModal
      :visible.sync="importModal.visible"
      :parameter="importModal.soucre"
      @import="importModalOk()"
    ></importModal>
    <!-- 附件预览弹窗 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
  </inline-Modal>
</template>

<script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/TopVUI";
import { downloadDfs } from "@/utils/TopVUI";
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
import cloneDeep from "lodash.clonedeep";
//预览
import previewModal from "@/pages/document/minio/previewModal";
// 竣工资料
import addFinalModal from "./addFinalModal.vue";
//档案目录
import addFilesModal from "./addFilesModal.vue";
//卷内目录
import addVolumeModal from "./addVolumeModal.vue";
//导入
import importModal from "./importModal.vue";
import { addAttributeByKey, flatTreeData } from "@/utils/util.js";
import { downLoadBatchFileByArraybuffer } from "@/utils/TopVUI";
import { downLoadFileByArraybuffer } from "@/utils/util";
import {
  getButtonAuth,
  getConfigTree,
  deleteConfigTree,
  pageFilesDirectory,
  deleteFilesDirectory,
  pageVolume,
  deleteVolume,
  exportConfigTreeExcel,
} from "@/api/safetyManage";
export default {
  name: "detailPage",
  components: {
    IconFont,
    previewModal,
    addFinalModal,
    addFilesModal,
    addVolumeModal,
    importModal,
  },
  props: {
    visible: {
      type: Boolean,
      required: false,
    },
    uuid: {
      type: String,
      required: "",
    },
    proCode: {
      type: String,
      required: "",
    },
  },
  data() {
    return {
      //树
      spinning: false,
      expandedKeys: [],
      autoExpandParent: true,
      selectedKeys: [],
      treeData: [],
      treeItem: {},
      keyWord: "",
      cloneTreeData: [],
      //权限
      btn: {},
      //竣工资料
      addFinalModal: {
        visible: false,
        soucre: {},
        operateType: "",
      },
      //档案目录
      files: {
        //列表
        loading: false,
        tableData: [],
        //弹窗
        visible: false,
        soucre: {},
        operateType: "",
        refresh: true,
        index: 1,
      },
      rowsItem: {},
      //卷内目录
      volume: {
        //列表
        loading: false,
        tableData: [],
        pager: {
          page: 1,
          pageSize: 20,
          total: 0,
        },
        //弹窗
        visible: false,
        soucre: {},
        operateType: "",
      },
      //导入
      importModal: {
        visible: false,
        soucre: {},
      },
      //预览
      previewModal: {
        visible: false,
        loading: false,
      },
    };
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
          this.$nextTick(() => {
            this.dragResize();
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    //预览
    viewFile(row) {
      let { url } = row.fileInfo;
      this.previewModal.loading = true;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
      this.previewModal.visible = true;
      this.previewModal.loading = false;
    },
    //下载
    downloadFile(row) {
      let { url } = row.fileInfo;
      if (!url) {
        this.$message.success("文件不存在", 1.5);
        return;
      }
      downloadDfs(url);
    },

    //导入弹窗
    handelImportModal() {
      let { proCode } = this;
      this.importModal.soucre = { proCode };
      this.importModal.visible = true;
    },

    importModalOk() {
      this.getTreeData();
    },

    //导出
    exportExcel() {
      let { proCode } = this;
      exportConfigTreeExcel({ proCode, type: "pz" })
        .then((data) => {
          downLoadFileByArraybuffer(data, "档案配置表.xlsx");
        })
        .catch((_) => {});
    },
    //竣工资料确定
    addFinalModalOk() {
      this.getTreeData();
    },
    //新增竣工资料
    handelAddFinal(id) {
      let { proCode, uuid } = this;
      this.addFinalModal.soucre = { proCode, mainUuid: uuid, pid: id };
      this.addFinalModal.operateType = "1";
      this.addFinalModal.visible = true;
    },
    //编辑竣工资料
    handelEditFinal(uuid) {
      this.addFinalModal.soucre = { uuid };
      this.addFinalModal.operateType = "2";
      this.addFinalModal.visible = true;
    },
    //删除竣工资料
    handleDelFinal(uuid) {
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          deleteConfigTree({ uuid })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("删除成功", 1.5);
                that.getTreeData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },

    //档案目录确定
    addFilesModalOk() {
      this.getFilesTableData();
    },
    //新增档案目录
    handelAddFiles() {
      let { id, proCode } = this.treeItem;
      this.files.soucre = { proCode, classifyId: id };
      this.files.operateType = "1";
      this.files.visible = true;
    },
    //编辑档案目录
    handelEditFiles(row) {
      this.files.soucre = { uuid: row.uuid };
      this.files.operateType = "2";
      this.files.visible = true;
    },
    //删除档案目录
    handleDelFiles(row) {
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          deleteFilesDirectory({ uuid: row.uuid })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("删除成功", 1.5);
                that.files.refresh = true;
                that.getFilesTableData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },
    //行选中
    currentChangeEvent({ row, rowIndex }) {
      this.files.refresh = false;
      if (rowIndex == 0) {
        return;
      }
      this.files.index = rowIndex;
      this.rowsItem = row;
      this.getVolumeTableData();
    },
    //查询档案目录列表
    getFilesTableData() {
      let { id } = this.treeItem;
      if (!id) {
        return;
      }
      this.files.loading = true;
      return new Promise((resolve, reject) => {
        pageFilesDirectory({ classifyId: id })
          .then((res) => {
            let { nodeName, documentCode } = this.treeItem;
            let { data } = res;
            this.files.tableData = data ?? [];
            this.files.tableData.unshift({ caseTitle: nodeName, documentCode });
            if (this.files.refresh) {
              this.files.index = 1;
              this.rowsItem = data?.[1] ?? {};
              this.$refs.filexTable.setCurrentRow(this.files.tableData[1]);
              this.getVolumeTableData();
            }
            resolve();
          })
          .catch((_) => {
            this.rowsItem = {};
            this.files.tableData = [];
            reject();
          })
          .finally((_) => {
            this.files.loading = false;
          });
      });
    },

    //卷内目录确定
    addVolumeModalOk() {
      this.getFilesTableData().then(() => {
        this.$refs.filexTable.setCurrentRow(
          this.files.tableData[this.files.index]
        );
      });
      this.getVolumeTableData();
    },
    //新增卷内目录
    handelAddVolume() {
      let { uuid } = this.rowsItem;
      this.volume.soucre = { directoryUuid: uuid };
      this.volume.operateType = "1";
      this.volume.visible = true;
      this.files.refresh = false;
    },

    //编辑卷内目录
    handelEditVolume(row) {
      this.volume.soucre = { uuid: row.uuid };
      this.volume.operateType = "2";
      this.volume.visible = true;
      this.files.refresh = false;
    },

    //删除卷内目录
    handleDelVolume(row) {
      this.files.refresh = false;
      let dataLength = this.volume.tableData.length;
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          deleteVolume({ uuid: row.uuid })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("删除成功", 1.5);
                that.getFilesTableData().then(() => {
                  that.$refs.filexTable.setCurrentRow(
                    that.files.tableData[that.files.index]
                  );
                });
                if (dataLength == 1 && that.volume.pager.page > 1) {
                  that.volume.pager.page -= 1;
                }
                that.getVolumeTableData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },
    //查询卷内目录列表
    getVolumeTableData() {
      let { page, pageSize } = this.volume.pager;
      let { uuid } = this.rowsItem;
      if (!uuid) {
        this.volume.pager.page = 1;
        this.volume.tableData = [];
        return;
      }
      this.volume.loading = true;
      pageVolume({
        page,
        pageSize,
        directoryUuid: uuid,
      })
        .then((res) => {
          this.volume.tableData = res?.data?.rows || [];
          this.volume.pager.total = res?.data?.totalCount || 0;
        })
        .catch((_) => {
          this.volume.tableData = [];
          this.volume.pager.total = 0;
        })
        .finally((_) => {
          this.volume.loading = false;
        });
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.volume.pager.page = currentPage;
      this.volume.pager.pageSize = pageSize;
      this.getVolumeTableData();
    },

    getData() {
      Promise.all([this.getAuthData(), this.getTreeData()]);
    },
    //查询导入导出权限
    getAuthData() {
      return new Promise((resolve, reject) => {
        let { proCode } = this;
        getButtonAuth({ proCode, type: "pz" })
          .then((res) => {
            this.btn = res?.data ?? {};
            resolve();
          })
          .catch((_) => {
            this.btn = {};
            reject();
          });
      });
    },
    getTreeData() {
      this.spinning = true;
      return new Promise((resolve, reject) => {
        let { proCode } = this;
        getConfigTree({ proCode })
          .then((res) => {
            let { data } = res;
            this.cloneTreeData = cloneDeep(data ?? []);
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              this.cloneTreeData,
              "children"
            );
            this.treeData = filterData;
            this.treeData.length > 0 && this.getFirstTreeNode();
            resolve();
          })
          .catch((_) => {
            this.cloneTreeData = [];
            this.treeData = [];
            reject();
          })
          .finally((_) => {
            this.spinning = false;
          });
      });
    },

    //树展开
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    //树选择
    onSelect(selectedKeys, info) {
      let { uuid } = info.node.dataRef;
      if (this.selectedKeys.includes(uuid)) {
        return;
      }
      this.selectedKeys = selectedKeys;
      this.treeItem = info.node.dataRef;

      this.files.refresh = true;
      this.getFilesTableData();
      return;
    },

    //默认展开第一级节点
    getFirstTreeNode() {
      let { treeData } = this;
      let flatData = flatTreeData(treeData, "children");
      let item = flatData.find((v) => !v.children || v.children.length == 0);
      this.expandedKeys = [item.uuid];
      this.selectedKeys = [item.uuid];
      this.treeItem = item;
      this.getFilesTableData();
    },

    //页面返回
    handelCancel() {
      this.$parent.getTableData();
      this.$emit("update:visible", false);
    },

    onSearch() {
      let { keyWord, cloneTreeData } = this;
      let cloneData = cloneDeep(cloneTreeData);
      this.treeData = this.filterTree(cloneData, "children", (node) =>
        node.nodeName.includes(keyWord)
      );
    },

    //过滤树形数据
    filterTree(data, children = "children", filterFunc) {
      return data
        .filter((node) => {
          // 如果当前节点符合条件，直接返回true
          if (filterFunc(node)) {
            return true;
          }
          // 如果当前节点有子节点，递归过滤子节点
          if (node[children]) {
            node[children] = this.filterTree(
              node[children],
              children,
              filterFunc
            );
            // 如果过滤后的子节点不为空，说明当前节点需要保留
            return node[children].length > 0;
          }
          // 当前节点不符合条件，也没有子节点或子节点不符合条件，返回false
          return false;
        })
        .map((node) => {
          // 创建新对象，避免修改原始数据
          return {
            ...node,
            [children]: node[children]
              ? this.filterTree(node[children], children, filterFunc)
              : [],
          };
        });
    },

    //拖拽
    dragResize() {
      const container = document.querySelector(".drag-container");
      const left = document.querySelector(".tree-baseinfo-container");
      const right = document.querySelector(".table-baseinfo-container");
      let isDragging = false;
      let startX;
      let startWidth;
      container.addEventListener("mousedown", (e) => {
        isDragging = true;
        startX = e.clientX;
        startWidth = parseFloat(getComputedStyle(left).width);
      });
      document.addEventListener("mousemove", (e) => {
        if (!isDragging) return;
        const moveX = e.clientX - startX;
        const newWidth = startWidth + moveX;
        left.style.width = `${newWidth}px`;
        right.style.width = `calc(100% - ${newWidth}px -10px)`;
      });
      document.addEventListener("mouseup", () => {
        isDragging = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.modal-full-layout {
  /deep/.main {
    padding: 0;
    background-color: #f0f2f5;
  }
}
.configDetailPage-container {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  .drag-btn {
    cursor: pointer;
    width: 16px;
    height: 26px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 2px 2px 2px 2px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #d9d9d9;
    //border-bottom: 1px solid @border-color;
    .name {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
    }
    .import-btns {
      /deep/.ant-btn {
        margin-bottom: 0 !important;
        &:last-of-type {
          margin-right: 0 !important;
        }
      }
    }
  }

  .tree-baseinfo-container {
    background-color: @base-bg-color;
    border-radius: 0px 0px 6px 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 300px;
    min-width: 300px;

    .tree-body-container {
      flex: 1;
      padding: 10px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .tree-tip {
        padding: 10px 10px 10px 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #8c8c8c;
      }
      .tree-main {
        flex: 1;
        overflow: auto;
        overflow-x: hidden;
        position: relative;
        /deep/.ant-tree {
          li {
            width: 100%;
            .ant-tree-node-content-wrapper {
              position: relative;
              width: calc(100% - 34px);
              padding: 0 5px 0 0;
              .ant-tree-iconEle {
                color: #f3ab1f;
                font-size: 16px;
                .checked {
                  color: #1677ff;
                }
              }
              .ant-tree-title {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
                max-width: calc(100% - 70px);
                .checked {
                  color: #1677ff;
                }
                .operate-icon {
                  position: absolute;
                  top: 55%;
                  right: 0;
                  transform: translateY(-50%);
                  .btn-groups {
                    .anticon {
                      font-size: 14px;
                      margin-right: 5px;
                      &:last-of-type {
                        margin-right: 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        /deep/.ant-empty {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        /deep/.ant-spin {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          max-height: 100%;
        }
      }
    }
  }

  .resizer {
    width: 10px;
    position: relative;
    .drag-container {
      cursor: col-resize;
      user-select: none;
      touch-action: none;
      width: 16px;
      height: 26px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
      border-radius: 2px 2px 2px 2px;
      position: absolute;
      top: 45%;
      left: -4px;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .directory-body-container {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
  }

  .table-baseinfo-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 600px;

    .files-container {
      flex: 1;
      background-color: @base-bg-color;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      .header-container {
        padding-right: 10px;
        height: 57px;
      }
      .directory-body-container {
        /deep/.vxe-table {
          .vxe-table--body {
            tbody {
              tr:nth-child(1) {
                color: #333333 !important;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: bold;
                font-size: 14px;
                background: #f2f2f2;
              }
            }
          }
        }
      }
    }
    .volume-container {
      flex: 1;
      background-color: @base-bg-color;
      display: flex;
      flex-direction: column;
      .header-container {
        padding-right: 10px;
        height: 57px;
      }
      .directory-body-container {
        padding-bottom: 0;
        .operate-icon {
          .anticon {
            cursor: pointer;
            font-size: 18px;
            color: #1677ff;
          }
          .anticon-eye {
            margin-right: 20px;
          }
          .anticon-download {
            color: #239b53;
          }
        }
      }
      .pager-container {
        flex-shrink: 0;
        box-sizing: border-box;
      }
    }
  }
}
</style>
